<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- <comA name="学猫叫" artist="于谦" rank="1"></comA>
    <comA name="天堂" artist="腾格尔" rank="2"></comA>
    <comA name="青藏高原" artist="韩红" rank="3"></comA> -->
    <comA
      v-for="(song, index) in hotsangs"
      v-bind:key="index"
      :name="song.name"
      :artist="song.artist"
      :rank="index + 1"
    ></comA>
    <van-button type="primary">主要按钮</van-button>
    <router-view />
  </div>
</template>

<script>

import comA from "./components/componentA.vue";
export default {
  name: "App",
  data() {
    return {
      hotsangs: [
        { name: "学猫叫", artist: "于谦" },
        { name: "学猫天堂叫", artist: "腾格尔" },
        { name: "青藏高原", artist: "韩红" },
      ],
    };
  },
  components: {
    comA: comA,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
